什麼是網站推播通知

推播通知不管對 App 或是網站來說都是一種重新吸引用戶來使用 App 的方法，所以目標是即使網站、App 關閉時也要能在背景接收推播。推播的目的是為了增加 engagement，在行銷領域中 engagement 這個常見的指標就是指用戶在網站或 APP 上的互動程度或者參與度。

怎麼使用網站推播通知

因為主要是想在背景接受推播，所以實作上是基於可以背景執行的 Service Worker 來協助相關邏輯撰寫。

那實際上就是分成推送和接收兩方面，在網站中推送和通知使用不同但互補的 API：

• 推送: 當服務器向 Service Worker 提供訊息
• 通知: 顯示信息給用戶的服務人員或網頁腳本的作用

實現推送的三個關鍵步驟是：

1. 用戶端訂閱通知: 加入註冊訂閱邏輯
2. 伺服器發送推播訊息: 透過後端叫用相關 API 向用戶設備推播訊息
3. 用戶端推播事件處理: 當推送到達設備時，透過 Service Worker 的 "推播事件" 來處理後續相關邏輯

底下連結提供基本的推播示範:
https://linyencheng-push-notification.herokuapp.com/

客戶端訂閱通知

前端在實作概念上主要是四個步驟:

1. 獲得向用戶發送推播消息的許可
2. 拿到伺服器的 VAPID 公開金鑰
3. 透過 Push API 生成一個 PushSubscription 需要的所有相關訊息，這裡可以把 PushSubscription 當成用戶的 ID
4. 對伺服器發送訂閱請求

伺服器發送推播訊息

在實作後端的時候會遇到三個問題:

1. 什麼是推播服務、要怎麼執行?

收到訂閱通知的請求時，將請求內容驗證後就將消息推播到瀏覽器，若是瀏覽器離線，訊息就會排隊儲存起來等連線恢復後繼續傳送

2. 相關 API 傳送協定和格式?

瀏覽器會依照符合 IETF 標準的推播協議實作，伺服器原則上就是使用套件只要提供一個 endpoint 並且處理 PushSubscription 即可。

3. API 可以做到什麼程度

API 提供了一種向裝置發送訊息的方法

只要從伺服器發了推播消息，推播服務會將訊息保留，直到發生以下事件之一：

• 裝置上線，推播服務推播訊息成功
• 訊息過期，推播服務會將從 queue 刪除

用戶端推播事件處理

當推播服務成功推播後，瀏覽器會:

1. 接收到訊息
2. 解密數據
3. 觸發 Service Worker 中的事件

透過 Service Worker 瀏覽器可以在不打開頁面的情況下去監聽相關事件，所以 App 在 Service Worker 收到 "推播" 事件後，就可以執行任何背景的任務，像是偷偷傳送分析資料、離線快取資源下載、顯示通知等等。